<template>
   <el-main>
      <el-row type="flex" justify="center">
         <el-col :span="18">
            <el-row type="flex" justify="center">
               <el-col :span="8" style="text-align: right; padding-right: 10px;">
                  <div><img :src="surfaceImg" style="max-width: 300px; max-height: 300px"></div>
               </el-col>
               <el-col :span="8">
                  <div class="bookInfo">
                     <div>图书编号：{{ formData.bookCode }}</div>
                     <div>图书名称：{{ formData.bookName }}</div>
                     <div>归属类型：{{ formData.typeName }}</div>
                     <div>销售价格：{{ formData.unitPrice }}</div>
                     <div>作者：{{ formData.author }}</div>
                     <div>出版时间：{{ formData.publishDate }}</div>
                     <div>图书介绍：{{ formData.introduce }}</div>
                  </div>
               </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 40px;">
               <el-col :span="8">
                  <el-form :model="orderData" ref="orderRef" label-width="80px">
                     <el-form-item label="采购数量" prop="buyQty">
                        <el-input-number v-model="orderData.buyQty" :min="1" :max="100"
                                         label="描述文字"></el-input-number>
                     </el-form-item>
                     <el-form-item label="收货人" prop="receiveUser"
                                   :rules="[{ required: true, message: '不能为空'}]">
                        <el-input v-model="orderData.receiveUser"></el-input>
                     </el-form-item>
                     <el-form-item label="收货电话" prop="receivePhone"
                                   :rules="[{ required: true, message: '不能为空'}]">
                        <el-input v-model="orderData.receivePhone"></el-input>
                     </el-form-item>
                     <el-form-item label="收货地址" prop="receiveAddress"
                                   :rules="[{ required: true, message: '不能为空'}]">
                        <el-input v-model="orderData.receiveAddress"></el-input>
                     </el-form-item>
                     <div style="text-align: center; ">
                        <el-button @click="mSubmitOrder">确认下单</el-button>
                     </div>
                  </el-form>
               </el-col>
            </el-row>
         </el-col>
      </el-row>
   </el-main>
</template>
<script>
import axiosUtil from "@/utils/axiosUtil";
import loginUtil from "@/utils/loginUtil";

export default {
   data() {
      return {
         formData: {
            id: '',
            bookCode: '',
            bookName: '',
            typeName: '',
            unitPrice: '',
            publishDate: '',
            surfaceImg: '',
            author: '',
            introduce: ''
         },
         orderData: {
            bookCode: '',
            buyQty: 1,
            receiveUser: '',
            receivePhone: '',
            receiveAddress: ''
         }
      }
   },
   computed: {
      surfaceImg() {
         return axiosUtil.baseUrl() + '/uploadDir/' + this.formData.surfaceImg;
      }
   },
   methods: {
      //获取图书详情数据
      mGetData() {
         axiosUtil.get({
            url: '/bookInfo/getDetail',
            data: {
               id: this.formData.id
            },
            success: res => {
               Object.keys(this.formData).forEach((key) => {
                  this.formData[key] = res.data.entry[key];
               })
               this.orderData.bookCode = this.formData.bookCode;
            }
         })
      },
      //提交订单
      mSubmitOrder() {
         //检查是否已登录
         if (loginUtil.isUserLogin() == true) {
            this.$refs['orderRef'].validate(valid => {
               if (valid) {
                  axiosUtil.postForm({
                     url: '/orderInfo/bookOrder',
                     data: this.orderData,
                     success: res => {
                        window.location.href = "myOrder.html"
                     }
                  })
               }
            })
         } else {
            this.$message.info('请先登录')
            this.$router.push('/clientlogin')
         }
      }
   },
   created() {
      this.formData.id = this.$route.query.id;
      this.mGetData();
   }
}
</script>
<style>
.bookInfo div {
   line-height: 35px;
   text-align: left;
}
</style>
